<template>
    <div>
    <div id="detail">
       <div id="detail-c1">
           <h1>{{tiezi.title}}</h1>
           <div v-html="tiezi.content">
           </div>

               <!--<div class="ql-editor" v-html="tiezi.content">-->


           <div>
               <button @click="tiezihuifu()">回复</button>
                <div v-if="tieziflag">
                    <el-input
                            type="textarea"
                            :rows="2"
                            :placeholder="`回复@${tiezi.author}`"
                            v-model="tiezimessage">
                    </el-input>
                    <div><button @click="tiezitijiao()">提交</button><button @click="tieziquxiao()">取消</button></div>
                </div>
           </div>
       </div>
        <div id="detail-c2">
            <div v-for="(item,index) in reply" class="one">
                <div>
                    <div style="display: flex;justify-content: space-between">
                        <div><span style="background-color: pink;">{{item.author}}:</span> {{item.content}} </div>
                        <div style="display: flex;justify-content: space-between"> <div @click="zan($event,item)"  style="position: relative;right: 30px;" ><img  src="../svg/zan.svg" alt="" width="20px"></div> <div @click="comment($event,item)" style="position: relative;right: 15px;"><img  src="../svg/comment.svg" alt="" width="20px"></div></div>
                    </div>
                    <div  v-if="flags[`${item.id}`]">
                        <el-input
                                type="textarea"
                                :rows="2"
                                :placeholder="`回复@${item.author}`"
                                v-model="textarea[`${item.id}`]">
                        </el-input>
                        <div><button @click="tijiao(item)">提交</button><button @click="quxiao(item)">取消</button></div>
                    </div>
                </div>
                <div v-if="(item.children!=null)&&(item.children).length>=1">
                    <div v-for="(item2,index2) in item.children"  class="two">
                      <div style="display: flex;justify-content: space-between">
                          <div><span style="background-color: pink;">{{item2.author}}:</span>{{item2.content}} </div>
                          <div style="display: flex;justify-content: space-between"> <div @click="zan($event,item2)"  style="position: relative;right: 30px;" ><img  src="../svg/zan.svg" alt="" width="20px"></div> <div @click="comment($event,item2)" style="position: relative;right: 15px;"><img  src="../svg/comment.svg" alt="" width="20px"></div></div>
                      </div>
                        <div  v-if="flags[`${item2.id}`]">
                            <el-input
                                    type="textarea"
                                    :rows="2"
                                    :placeholder="`回复@${item2.author}`"
                                    v-model="textarea[`${item2.id}`]">
                            </el-input>
                            <div><button @click="tijiao(item2)">提交</button><button @click="quxiao(item2)">取消</button></div>
                        </div>
                    <div v-if="(item2.children!=null)&&(item2.children).length>=1">
                        <div v-for="(item3,index3) in item2.children"  class="three">
                            <div style="display: flex;justify-content: space-between">
                                <div> <span style="background-color: pink;">{{item3.author}}:</span>{{item3.content}} </div>
                                <div style="display: flex;justify-content: space-between"> <div @click="zan($event,item3)"  style="position: relative;right: 30px;" ><img  src="../svg/zan.svg" alt="" width="20px"></div> <div @click="comment($event,item3)" style="position: relative;right: 15px;"><img   src="../svg/comment.svg" alt="" width="20px"></div></div>
                            </div>
                            <div  v-if="flags[`${item3.id}`]">
                                <el-input
                                        type="textarea"
                                        :rows="2"
                                        :placeholder="`回复@${item3.author}`"
                                        v-model="textarea[`${item3.id}`]">
                                </el-input>
                                <div><button @click="tijiao(item3)">提交</button><button @click="quxiao(item3)">取消</button></div>
                            </div>
                        </div>
                        <img src="../../public/zan_click.svg" alt="" id="cao" style="display:none" >

                    </div>
                    </div>
                </div>



            </div>
        </div>
    </div>

    </div>
</template>

<script>
    import axios from 'axios';
    import Vue from 'vue';

    import VueQuillEditor from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import 'quill/dist/quill.min.js'

    export default {
        name: "Detail",
        components:{
        },
        data(){
            return{
                tiezi:{},
                reply:[],
                textarea: {},
                input: '',
                flags:{},
                tieziflag:false,
                tiezimessage:""
            }
        },
        methods:{
            tiezitijiao(){
                axios({
                        method:"post",
                        url:"http://localhost:8085/reply/insert",
                        data:{
                            tieziid:this.tiezi.id,
                            author:"lirh",
                            content:this.tiezimessage,
                            clevel:1
                        }}).then(res=>{
                              this.getReplys();
                            this.tiezimessage="";
                             this.tieziflag=false;
                        })
            },
            tieziquxiao(){
                this.tieziflag=false;
            },
            tiezihuifu(){
               this.tieziflag=true;
            },
            tijiao(obj){
                console.log("提交")
                console.log(this.textarea[`${obj.id}`])
                axios({
                    method:"post",
                    url:"http://localhost:8085/reply/insert",
                    data:{
                        fatherid:obj.id,
                        tieziid:obj.tieziid,
                        author:"lirh",
                        content:this.textarea[`${obj.id}`],
                        clevel:obj.clevel+1
                    }
                }).then(res=>{
                    Vue.set(this.flags,obj.id,false);
                    Vue.set(this.textarea,obj.id,"");
                    this.getReplys();
                })

            },
            quxiao(obj){
                Vue.set(this.flags,obj.id,false);
            },
            comment(event,obj){
                Vue.set(this.flags,obj.id,true);
            },
            zan(event,obj){
                var img=event.currentTarget.getElementsByTagName("img")[0];
              img.src=document.getElementById("cao").src;
                console.log(obj);
            },
            getReplys(){
                axios({
                    methods:"get",
                    url:`http://localhost:8085/reply/all/${this.$route.query.id}`
                }).then(res=>{
                    this.reply=res.data.data;
                })
            },
            gettiezi(){
                axios({
                    methods:"get",
                    url:`http://localhost:8085/tiezi/get/${this.$route.query.id}`
                }).then(res=>{
                    console.log(res);
                    this.tiezi=res.data.data;
                });
            }
        },
        mounted(){
            //1、请求帖子详情
            this.gettiezi();
        //    请求评论详情
        //     axios({
        //         methods:"get",
        //         url:`http://localhost:8085/reply/all/${this.$route.query.id}`
        //     }).then(res=>{
        //         this.reply=res.data.data;
        //     })
            this.getReplys();
        }
    }
</script>

<style scoped>
    #detail{
        width: 60vw;
        margin: 0 auto;
    }
    #detail-c1{


    }
    #detail-c1 h1{
        text-align: center;
    }
    .one,.two,.three{
        padding-left: 100px;
    }
    .one{
        border: 1px solid black;
    }
    .editor{
       width: 100vw;
        height: 40vh;
        position: fixed;
        bottom: 0px;
    }
    
</style>